<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 500px;
        height: 100px;
        line-height: 100px;
        background-color: skyblue;
        margin: 100px auto;
      }
      p {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; /* 省略号 */
      }
      /*   
        wtite-space 设置网页如何处理空白
          nomal   默认不处理
          nowrap  不换行
          pre     保留空白
      */
    </style>
  </head>
  <body>
    <div>
      <p>
        目前，在大多数开发环境中，已经基本不用table元素来做网页布局了，取而代之的是div+css，那么为什么不用table系表格元素呢？ 1、用DIV+CSS编写出来的文件k数比用table写出来的要小，不信你在页面中放1000个table和1000个div比比看哪个文件大
        2、table必须在页面完全加载后才显示，没有加载完毕前，table为一片空白，也就是说，需要页面完毕才显示，而div是逐行显示，不需要页面完全加载完毕，就可以一边加载一边显示 3、非表格内容用table来装，不符合标签语义化要求，不利于SEO 4、table的嵌套性太多，用DIV代码会比较简洁
      </p>
    </div>
  </body>
</html>
